<template>
    <div class="login font26">
        <div class="logo">
            <img src="../../assets/image/logo.png">
        </div>
        <div class="z-form">
            <div class="z-form-item">
                <z-input placeholder="请输入手机号" icon="icon-gerenzhongxin"/>
            </div>
            <div class="z-form-item">
                <z-input placeholder="请输入密码" inputType="password" icon="icon-gerenzhongxin"/>
            </div>
            <div class="z-form-item right font-999">
                <!-- <span @click="go">使用密码登录</span> -->
                <span @click="go">注册</span>
            </div>
        </div>
        <mt-button class="login-btn primary-bg font36" type="primary" @click="login">登录</mt-button>
        <p class="font-999">未注册手机可用验证码直接登陆</p>
        <p class="font-999">登陆即同意<span class="primary">《用户协议》</span>和<span class="primary">《隐私政策》</span></p>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { showToast } from '@/utils/project';
import zInput from '@/components/project/input/index.vue';
@Component({
    components: {
        zInput,
    },
})
export default class HelloWorld extends Vue {
    private value: boolean = true;
    /**
     * 登陆成功
     */
    private login() {
        this.$router.replace('/home');
    }
    private go() {
        this.$router.push('/register');
    }
}
</script>
<style lang="scss" scoped>
.login {
    .logo {
        position: relative;
        width: 100%;
        height: 498px;
        img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -142px;
            margin-left: -100px;
            width: 200px;
            height: 284px;
        }
    }
    .z-form {
        width: 100%;
        height: 341px;
        .z-form-item {
            width: calc(100% - 132px);
            margin: 0 auto;
            margin-bottom: 34px;
        }
        .z-form-item:last-of-type {
            margin-bottom: 0;
        }
    }
    .login-btn {
        width: calc(100% - 132px);
        height: 81px;
        border-radius: 40px;
        color: #fff;
        border: none;
    }
    & > p {
        margin-top: 20px;
    }
    & > p:last-of-type {
        margin-top: 100px;
    }
}
</style>
